<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-11 (新)Vue中的表单绑定</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <input v-model="value" />
        {{value}}
        <br />

        <textarea v-model="value1"></textarea>
        {{value1}}
        <br />

        <input type="checkbox" v-model="value2" />
        {{value2}}
        <br />

        <input type="radio" value="test" v-model="value3" />
        {{value3}}
        <br />

        <select v-model="value4">
            <option disabled>--请选择--</option>
            <option value="123">A</option>
            <option value="456">B</option>
            <option value="789">C</option>
        </select>
        {{value4}}

        <!-- 数据绑定延迟到输入框失去焦点或按下回车键时才绑定 -->
        <input v-model.lazy="value5" />
        {{value5}}
        <br />

        <!-- 输入的时候获取到数字,而且输入数字之后，输入其他的非数字无效 -->
        <input v-model.number="value6" />
        {{value6}}
        <br />

        <!-- 去除获取的value值的首尾空格 -->
        <input v-model.trim="value7" />
        {{value7}}
        <br />
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                value: "",
                value1: "",
                value2: "",
                value3: "",
                value4: "",
                value5: "",
                value6: "",
                value7: "",
            },
            watch: {
                value6() {
                    console.log(typeof this.value6);
                },
                value7() {
                    console.log(this.value7);
                },
            }
        })
    </script>
</body>

</html>